import React from "react";
import { useSearchParams, Link } from "react-router-dom";
import "./PlayList.scss";
import "../../../../../node_modules/antd/dist/antd.css";

export default function PlayListCover(props) {
  const { value } = props;
  return (
    <>
      {/* 歌单封面区域 */}
      <div
        id="PLHead"
        style={{
          backgroundImage: `url(${value && value.coverImgUrl})`,
        }}
      >
        <div className="mask"></div>
        <div className="coverDetail">
          <div
            className="imgCover"
            style={{
              backgroundImage: `url(${value && value.coverImgUrl})`,
            }}
          ></div>
          <div className="infoCover">
            <h3 className="title">{value && value.name}</h3>
            <div className="user">
              <Link className="userLink" to=":javascript">
                <div className="userNavigate">
                  <img
                    className="u-img"
                    src={value && value.creator.avatarUrl}
                    alt="看什么看"
                  />
                  <span className="starMark"></span>
                </div>
                {value && value.creator.nickname}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
